<template>
  <div class="page">
    <au-panel class="section" title="基础用法">
      <!-- <p class="paragraph">
        文本输入框组件
      </p> -->
      <!-- 组件示例 -->
      <div class="component-example">
        <el-form>
          <el-row>
            <ep-select colspan="8" label="基础用法" :SelfDictionaries="options"></ep-select>
          </el-row>
        </el-form>
      </div>
      <code-h v-show="codeShow1" lang="html" content='
        <template>
          <el-form>
            <el-row>
              <ep-select colspan="8" label="基础用法" :SelfDictionaries="options"></ep-select>
            </el-row>
          </el-form>
        </template>

        <script>
        export default {
          data () {
            return {
              options: [
                {
                  value: "Breaking",
                  key: "b"
                },
                {
                  value: "Jazz",
                  key: "j"
                },
                {
                  value: "Popppin",
                  key: "p"
                },
                {
                  value: "Locking",
                  key: "l"
                }
              ],
            }
          }
        }
        </script>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center;" @click="codeShow1 = !codeShow1">
        {{codeShow1 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="禁用选择或有禁用选项">
      <!-- <p class="paragraph">
        文本输入框组件
      </p> -->
      <!-- 组件示例 -->
      <div class="component-example">
        <el-form>
          <el-row>
            <ep-select colspan="8" placeholder="不让选择" label="禁止选择" eleDisabled :SelfDictionaries="options"></ep-select>
            <ep-select colspan="8" label="禁止选项" :SelfDictionaries="options1"></ep-select>
          </el-row>
        </el-form>
      </div>
      <code-h v-show="codeShow2" lang="html" content='
        <template>
          <el-form>
            <el-row>
              <ep-select colspan="8" placeholder="不让选择" label="禁止选择" eleDisabled :SelfDictionaries="options"></ep-select>
              <ep-select colspan="8" label="禁止选项" :SelfDictionaries="options1"></ep-select>
            </el-row>
          </el-form>
        </template>

        <script>
        export default {
          data () {
            return {
              options: [
                {
                  value: "Breaking",
                  key: "b"
                },
                {
                  value: "Jazz",
                  key: "j"
                },
                {
                  value: "Popppin",
                  key: "p"
                },
                {
                  value: "Locking",
                  key: "l"
                }
              ],
              options1: [
                {
                  value: "Breaking",
                  disabled: true,
                  key: "b"
                },
                {
                  value: "Jazz",
                  key: "j"
                },
                {
                  value: "Popppin",
                  key: "p"
                },
                {
                  value: "Locking",
                  key: "l"
                }
              ],
            }
          }
        }
        </script>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center;" @click="codeShow2 = !codeShow2">
        {{codeShow2 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="不同大小">
      <!-- <p class="paragraph">
        文本输入框组件
      </p> -->
      <!-- 组件示例 -->
      <div class="component-example">
        <el-form>
          <el-row>
            <ep-select labelWidth="100" colspan="6" label="默认大小" :SelfDictionaries="options"></ep-select>
            <ep-select labelWidth="100" colspan="6" label="中等大小" size="medium" :SelfDictionaries="options1"></ep-select>
            <ep-select labelWidth="100" colspan="6" label="小型大小" size="small" :SelfDictionaries="options1"></ep-select>
            <ep-select labelWidth="100" colspan="6" label="迷你大小" size="mini" :SelfDictionaries="options1"></ep-select>
          </el-row>
        </el-form>
      </div>
      <code-h v-show="codeShow3" lang="html" content='
        <template>
          <el-form>
            <el-row>
              <el-col :span="8">
                <ep-select label="默认大小" :SelfDictionaries="options"></ep-select>
              </el-col>
              <el-col :span="8">
                <ep-select label="中等大小" size="medium" :SelfDictionaries="options1"></ep-select>
              </el-col>
              <el-col :span="8">
                <ep-select label="小型大小" size="small" :SelfDictionaries="options1"></ep-select>
              </el-col>
              <el-col :span="8">
                <ep-select label="迷你大小" size="mini" :SelfDictionaries="options1"></ep-select>
              </el-col>
            </el-row>
          </el-form>
        </template>

        <script>
        export default {
          data () {
            return {
              options: [
                {
                  value: "Breaking",
                  key: "b"
                },
                {
                  value: "Jazz",
                  key: "j"
                },
                {
                  value: "Popppin",
                  key: "p"
                },
                {
                  value: "Locking",
                  key: "l"
                }
              ],
              options1: [
                {
                  value: "Breaking",
                  disabled: true,
                  key: "b"
                },
                {
                  value: "Jazz",
                  key: "j"
                },
                {
                  value: "Popppin",
                  key: "p"
                },
                {
                  value: "Locking",
                  key: "l"
                }
              ],
            }
          }
        }
        </script>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center;" @click="codeShow3 = !codeShow3">
        {{codeShow3 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="默认选中">
      <!-- <p class="paragraph">
        文本输入框组件
      </p> -->
      <!-- 组件示例 -->
      <div class="component-example">
        <el-form>
          <el-row>
            <ep-select colspan="8" label="默认选中" :value="options[0].value" :SelfDictionaries="options"></ep-select>
          </el-row>
        </el-form>
      </div>
      <code-h v-show="codeShow4" lang="html" content='
        <template>
          <el-form>
            <el-row>
              <ep-select colspan="8" label="默认选中" :value="options[0].value" :SelfDictionaries="options"></ep-select>
            </el-row>
          </el-form>
        </template>

        <script>
        export default {
          data () {
            return {
              options: [
                {
                  value: "Breaking",
                  key: "b"
                },
                {
                  value: "Jazz",
                  key: "j"
                },
                {
                  value: "Popppin",
                  key: "p"
                },
                {
                  value: "Locking",
                  key: "l"
                }
              ]
            }
          }
        }
        </script>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center;" @click="codeShow4 = !codeShow4">
        {{codeShow4 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="使用已有字典项">
      <!-- <p class="paragraph">
        文本输入框组件
      </p> -->
      <!-- 组件示例 -->
      <div class="component-example">
        <el-form>
          <el-row>
            <ep-select colspan="8" name="ALC018" label="使用已有字典项" ></ep-select>
            <el-col :span="14" style="margin-left: 20px">字典项需要在项目中的 <b>Dictionaries.js</b> 中获取</el-col>
          </el-row>
        </el-form>
      </div>
      <code-h v-show="codeShow5" lang="html" content='
        <template>
          <el-form>
            <el-row>
              <ep-select colspan="8" name="ALC018" label="使用已有字典项" ></ep-select>
            </el-row>
          </el-form>
        </template>

        <script>
        export default {
          data () {
            return {
            }
          }
        }
        </script>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center;" @click="codeShow5 = !codeShow5">
        {{codeShow5 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="多选">
      <div class="component-example">
        <el-form>
          <el-row>
            <ep-select colspan="8" multiple name="injuryDegree" label="多选" ></ep-select>
            <ep-select colspan="8" collapse multiple name="injuryDegree" label="多选折叠" ></ep-select>
          </el-row>
        </el-form>
      </div>
      <code-h v-show="codeShow6" lang="html" content='
        <template>
          <el-form>
            <el-row>
              <ep-select colspan="8" multiple name="injuryDegree" label="多选" ></ep-select>
              <ep-select colspan="8" collapse multiple name="injuryDegree" label="多选折叠" ></ep-select>
            </el-row>
          </el-form>
        </template>

        <script>
        export default {
          data () {
            return {
            }
          }
        }
        </script>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center;" @click="codeShow6 = !codeShow6">
        {{codeShow6 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="Props">
      <au-table>
        <thead>
          <tr>
            <th>字段</th>
            <th>必填</th>
            <th>类型</th>
            <th>默认</th>
            <th>可选</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>size</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td><au-icon type="minus"></au-icon></td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">默认大小</li>
                <li class="au-theme-border-color--base-8">medium</li>
                <li class="au-theme-border-color--base-8">small</li>
                <li class="au-theme-border-color--base-8">mini</li>
              </ol>
            </td>
            <td>
              选择框大小
            </td>
          </tr>
          <tr>
            <td>clearable</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>Boolean</td>
            <td>true</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">true</li>
                <li class="au-theme-border-color--base-8">false</li>
              </ol>
            </td>
            <td>
              是否可以清空选项
            </td>
          </tr>
          <tr>
            <td>keyvalue</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>
              String
            </td>
            <td>key</td>
            <td><au-icon type="minus"></au-icon></td>
            <td>
              作为 value 唯一标识的键名，默认值为 key
            </td>
          </tr>
          <tr>
            <td>lablevalue</td>
            <td>
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td>value</td>
            <td>
              <au-icon type="minus"></au-icon>
            </td>
            <td>
              作为 value 唯一标识的键名，默认值为 key
            </td>
          </tr>
          <tr>
            <td>SelfDictionaries</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>Array</td>
            <td><au-icon type="minus"></au-icon></td>
            <td>
              <au-icon type="minus"></au-icon>
            </td>
            <td>
              自己传入的选项数组
            </td>
          </tr>
          <tr>
            <td>ishide</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>Boolean</td>
            <td>false</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">true</li>
                <li class="au-theme-border-color--base-8">false</li>
              </ol>
            </td>
            <td>
              选择框是否显示
            </td>
          </tr>
          <tr>
            <td>value</td>
            <td>
              <au-icon type="times"></au-icon>
            </td>
            <td>
              String<br>
              -Array<br>
              -Object
            </td>
            <td><au-icon type="minus"></au-icon></td>
            <td><au-icon type="minus"></au-icon></td>
            <td>
              默认选中的值
            </td>
          </tr>
          <tr>
            <td>eleDisabled</td>
            <td>
              <au-icon type="times"></au-icon>
            </td>
            <td>
              Boolean
            </td>
            <td>
              false
            </td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">true</li>
                <li class="au-theme-border-color--base-8">false</li>
              </ol>
            </td>
            <td>
              是否禁用
            </td>
          </tr>
          <tr>
            <td>colspan</td>
            <td>
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td>24</td>
            <td>
              0-24
            </td>
            <td>
              占据一行的比例
            </td>
          </tr>
          <tr>
            <td>labelWidth</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td>140</td>
            <td><au-icon type="minus"></au-icon></td>
            <td>
              label 宽度，默认是140px
            </td>
          </tr>
          <tr>
            <td>label</td>
            <td>
              <au-icon type="check" class="au-theme-color--success"></au-icon>
            </td>
            <td>String</td>
            <td><au-icon type="minus"></au-icon></td>
            <td>
              <au-icon type="minus"></au-icon>
            </td>
            <td>
              选择框标签文本
            </td>
          </tr>
          <tr>
            <td>placeholder</td>
            <td>
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td>请选择</td>
            <td>
              <au-icon type="minus"></au-icon>
            </td>
            <td>选择框提示文本</td>
          </tr>
          <tr>
            <td>name</td>
            <td>
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td><au-icon type="times"></au-icon></td>
            <td>
              Dictionaries.js 中的数据数组
            </td>
            <td>
              有已经设计好的字典项数组在 Dictionaries.js 文件中，<br>
              填入其中的数组项后，将使用该字典成为选择框配置项
            </td>
          </tr>
          <tr>
            <td>multiple</td>
            <td>
              <au-icon type="times"></au-icon>
            </td>
            <td>Boolean</td>
            <td>false</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">true</li>
                <li class="au-theme-border-color--base-8">false</li>
              </ol>
            </td>
            <td>是否可以多选</td>
          </tr>
          <tr>
            <td>collapse</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>
              Boolean
            </td>
            <td>false</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">true</li>
                <li class="au-theme-border-color--base-8">false</li>
              </ol>
            </td>
            <td>
              多选时是否将选中值按文字的形式展示
            </td>
          </tr>
        </tbody>
      </au-table>
    </au-panel>
    <au-panel class="section" title="Events">
      <au-table>
        <thead>
          <tr>
            <th>名称</th>
            <th>回调参数</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr>
            <td>@input</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">value</li>
                <li class="au-theme-border-color--base-8">event</li>
              </ol>
            </td>
            <td>
              输入事件<br>
              参数value表示当前值<br>
              参数event表示事件对象
            </td>
          </tr> -->
          <tr>
            <td>@select-message</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">value(选中值)</li>
                <li class="au-theme-border-color--base-8">name(传入的name)</li>
                <li class="au-theme-border-color--base-8">kv(选中值的key-value)</li>
                <li class="au-theme-border-color--base-8">indexNum(没有作用)</li>
              </ol>
            </td>
            <td>
              选中值发生变化时触发
            </td>
          </tr>
        </tbody>
      </au-table>
    </au-panel>
  </div>
</template>
<script>
export default {
  name: 'select-examples',
  data () {
    return {
      codeShow1: false,
      codeShow2: false,
      codeShow3: false,
      codeShow4: false,
      codeShow5: false,
      codeShow6: false,
      codeShow7: false,
      codeShow8: false,
      codeShow9: false,
      codeShow10: false,
      codeShow11: false,
      codeShow12: false,
      codeShow13: false,
      codeShow14: false,
      codeShow15: false,
      value: 'j',
      values: ['b', 'p'],
      options: [
        {
          value: 'Breaking',
          key: 'b'
        },
        {
          value: 'Jazz',
          key: 'j'
        },
        {
          value: 'Popppin',
          key: 'p'
        },
        {
          value: 'Locking',
          key: 'l'
        }
      ],
      options1: [
        {
          value: 'Breaking',
          disabled: true,
          key: 'b'
        },
        {
          value: 'Jazz',
          key: 'j'
        },
        {
          value: 'Popppin',
          key: 'p'
        },
        {
          value: 'Locking',
          key: 'l'
        }
      ],
      validators: [
        {
          validator (v) {
            return v === 'b' || (v instanceof Array && v.includes('b'))
          },
          warning: 'Bboy Forever'
        }
      ]
    }
  },
  methods: {
    onChange (val, name, kv, index) {
      console.log(val, name, kv, index)
    }
  }
}
</script>
